<template>
  <div class="contact_bg" :style="screenHeight">
    <!-- 上方图片 -->
    <el-image :src='url' :fit='fit'></el-image>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item ><a href="/">首页</a></el-breadcrumb-item>
      <el-breadcrumb-item>合作单位&联系我们</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider ></el-divider>

    <div class="main_body">

      <div class="contact_info">
        <p>
          <span>联系人</span>
        </p>
        <p>
          <span>校长：2222222</span>
        </p>
        <p>
          <span>许老师：2222222</span>
        </p>
        <p>
          <span>招生热线：2222222</span>
        </p>
        <p>
          <span>联系电话：2222222</span>
        </p>
        <p>
          <span>传真：2222222</span>
        </p>
        <p>
          <span>邮箱：2222222</span>
        </p>
      </div>


		<div class="amap-wrapper">

            <el-amap vid="amapDemo"  :center="center" :amap-manager="AMapManager" :zoom="zoom" :events="events" >
            </el-amap>

            <div class="toolbar">
              <button @click="add()">add marker</button>
            </div>
		</div>


    <div class='cooinfo'>
      <h1 style="text-align: center; width: 100%;">合作单位</h1>
      <el-carousel indicator-position="outside">
          <el-carousel-item v-for="item in cooperationList" :key="item.id">
            <h3>{{ item.name }}</h3>
            <img :src="item.img" />
          </el-carousel-item>
        </el-carousel>
    </div>

    </div>

  </div>
</template>

<script>
  import nameImg from '@/assets/infoBG.jpg'
  import { AMapManager } from 'vue-amap'
  export default {
        data() {
          return {
            fit: 'fill',
            url: nameImg,
            screenHeight: 0,
            zoom: 12,
            center: [121.59996, 31.197646],
            AMapManager,
            events: {
              init(o) {
                let marker = new AMap.Marker({
                  position: [121.59996, 31.197646]
                });
                marker.setMap(o);
              }
            },
            cooperationList:[
              {
                "id":"1",
                "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590347455247&di=46a0e5ed3953c66b320863170bb85782&imgtype=0&src=http%3A%2F%2Farticle.fd.zol-img.com.cn%2Ft_s640x2000%2Fg5%2FM00%2F0E%2F03%2FChMkJldqCeKIfG9PAABeVQGddwAAAS2HgEYkn0AAF5t338.jpg",
                "name":"百度搜索"
              },
              {
                "id":"2",
                "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590347533142&di=14d55c3f179e3e9c30d36f656958fd3f&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F78efa0954d912615903b01f020633f3990a3633a3648-4OzrX9_fw658",
                "name":"腾讯网" ,
              },
              {
                 "id":"3",
                 "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590347533142&di=14d55c3f179e3e9c30d36f656958fd3f&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F78efa0954d912615903b01f020633f3990a3633a3648-4OzrX9_fw658",
                 "name":"腾讯网",
              },
              {
                  "id":"4",
                  "img":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590347533142&di=14d55c3f179e3e9c30d36f656958fd3f&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F78efa0954d912615903b01f020633f3990a3633a3648-4OzrX9_fw658",
                  "name":"腾讯网",
              }]
          };
        },
        mounted(){
          this.screenHeight = document.documentElement.clientHeight;
        },
        methods: {

              }

        };


</script>

<style>

  .contact_bg {
    height: 1500px;
    width: 100%;
    /* background: url(../../assets/contactBG2.gif) no-repeat; */
    background-size: 100% 1000px;
  }

  .contact_bg .el-image {
    width: 100%;
    height: 37%;
    max-height: 370px;
    margin-top: 0%;
    margin-left: 0%;

  }
  .contact_bg .el-breadcrumb{
    margin: 30px 15%;
    font-size: 14px;
  }
  .contact_bg .el-divider {

    background: rgb(20,94,11);
    width: 88%;
    margin-left: 6%;

  }

  .main_body{
   width: 100%;
    height: 50%;
  }
  .main_body .contact_info{
    width: 20%;
    height: 60%;
    background: transparent;
    margin-left: 10%;
    margin-top: 0%;
    /* background: #303133; */
    position: absolute;
  }
  .main_body .cooinfo{
    height: 400px;
    width: 40%;
    left: 30%;
    position: absolute;
    margin-top: 40%;
  }
  .main_body .cooinf .el-carousel{
    width: 100%;
    height: 100%;
  }
  .el-carousel-item{
  }
  .main_body .cooinf .el-carousel h3{
    width: 100%;
    left: 50%;
    text-align: center;
  }
  .main_body .cooinf .el-carousel img{
    width: 100%;
    height: 100%;
    left: 50%;
    position: absolute;
  }

  .amap-wrapper {
    margin-top: 0%;
    margin-left: 42%;
    width: 50%;
    height: 50%;
    position: absolute;
  }
</style>
